// 自定义hook

import { useState } from "react"

function useToggle () {
  // 可复用的逻辑代码

  const [ val, setVal ] = useState(true)

  const toggle = () => setVal(!val)

  //哪些状态和回调函数需要再其他组件中使用 return
  return {
    val,
    toggle
  }
}

// 封装通用思路
// 1. 声明一个以use打头的函数
// 2. 在函数内部封装可复用的逻辑
// 3. 把用到的状态或回调return
// 4. 在哪个组件用到,就执行这个函数,解构出来状态和回调进行使用


function App() {
  // const [ val, setVal ] = useState(true)
  // const toggle = () => setVal(!val)

  const {val, toggle} = useToggle()
  return (
    <div>
      {val && <div>this is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  )
}   

export default App
